<template>
	<view class="goumai">
		<view class="flex goodsBox">
			<view class="goodsImg">
				<image src="../../static/indexad/zfb.png" mode=""></image>
			</view>
			<view class="">
				<view class="">
					商品名称......
				</view>
				<view class="">
					￥589.00
				</view>
			</view>
		</view>
		<view class="addressBox flex-js" @click="selectAddress">
			<view class="iconBox">
				<fui-icon name="location" size="50"></fui-icon>
			</view>
			<view class="addressMsg">
				<view class="address">
					河北省保定市清苑区河北省保定市清苑区河北省保定市清苑区
				</view>
				<view class="" style="font-size: 28rpx;color: #999999;">
					宋佳伟 11111111111
				</view>
			</view>
			<view class="iconBox">
				<fui-icon name="arrowright" size="50"></fui-icon>
			</view>
		</view>
		<view class="freight flex-js">
			<view class="">
				运费
			</view>
			<view class="">
				包邮
			</view>
		</view>
		<view class="buyBox" :style="{'bottom':bottomHight+'rpx'}">
			<view class="btn flex">
				确认购买￥589.00
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomHight: 0,
			};
		},
		mounted() {
			let app = uni.getSystemInfoSync()
			this.bottomHight = app.safeAreaInsets.bottom
			console.log('app', app);
		},
		methods: {
			selectAddress() {
				uni.navigateTo({
					url: '/myPages/addressManage'
				})
			}
		}
	}
</script>

<style lang="scss">
	view {
		box-sizing: border-box;
	}

	.buyBox {
		background-color: white;
		padding: 20rpx;
		position: fixed;
		left: 0;
		width: 100vw;

		.btn {
			padding: 20rpx 0rpx;
			color: white;
			font-weight: 600;
			justify-content: center;
			border-radius: 60rpx;
			background-color: #f9613e;
		}
	}

	.freight {
		font-size: 28rpx;
		background-color: white;
		padding: 20rpx;
		border-radius: 30rpx;
	}

	.goumai {
		background-color: #F8F8F8;
		padding: 20rpx;
		width: 100vw;
		min-height: 100vh;
	}

	.goodsImg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 30rpx;
		}
	}

	.goodsBox {
		border-radius: 30rpx;
		background-color: white;
		padding: 20rpx 10rpx;
		margin-bottom: 20rpx;
	}

	.addressBox {
		text-align: center;
		border-radius: 30rpx;
		background-color: white;
		padding: 20rpx 10rpx;
		margin-bottom: 20rpx;
	}

	.iconBox {
		width: 10%;
	}

	.addressMsg {
		text-align: left;
		width: 80%;

		.address {
			font-weight: 600;
			font-size: 30rpx;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 2;
		}
	}
</style>